import {designPage, reactive} from "@peryl/react-compose";
import {Select, SelectOption} from "plain-design";
import {AppRouter} from "../AppRouter";

interface iRouteMenu {
  path: string,
  name: string,
}

const menus: iRouteMenu[] = [
  { name: '基础示例', path: 'basic' },
  { name: '阻塞渲染测试', path: 'test-block-render' },
  { name: '测试变量依赖(1)', path: 'plp' },
  { name: '测试变量依赖(2)', path: 'pdp' },
  { name: '循环变量测试', path: 'dep-vars' },
  { name: '空白页面', path: 'blank' },
];

export const RouteSelector = designPage(() => {

  let initPath: string | undefined = AppRouter.state.route.path.replace(/\//g, '').trim();
  if (!initPath) {initPath = 'basic';}

  const state = reactive({
    curPath: initPath,
  });

  const handler = {
    onSelectorChange: (path: any) => {
      if (!path) {return;}
      AppRouter.history.push(path);
    },
  };

  return () => (
    <Select noClear v-model={state.curPath} onChange={handler.onSelectorChange} size="small" width={120}>
      {menus.map(menu => (
        <SelectOption label={menu.name} val={menu.path} key={menu.path}/>
      ))}
    </Select>
  );
});

